<nav id="doc-nav" class="pt-1" data-role="collapse" data-toggle-element="#doc-nav-toggle">
    <div class="doc-nav-item d-block d-none-md">
        <a href="index.html">General</a>
        <ul class="">
            <li class="done"><a href="index.html">Home</a></li>
            <li class="done"><a href="intro.html">Get Started</a></li>
            <li class="done"><a href="m4q-about.html">Components</a></li>
            <li class="done"><a href="support.html">Support</a></li>
            <li class="done"><a href="https://github.com/olton/Metro-UI-CSS">GitHub</a></li>
        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="intro.html">Getting started</a>
        <ul class="toc-nav">
            <li class="done"><a href="intro.html">Introduction</a></li>
            <li class="done"><a href="download.html">Download</a></li>
            <li class="done"><a href="contents.html">Contents</a></li>
            <li class="done"><a href="browsers.html">Browsers &amp; devices</a></li>
            <li class="done"><a href="media.html">Media breakpoints</a></li>
            <li class="done"><a href="events.html">Define Events</a></li>
            <li class="done"><a href="m4q.html">DOM manipulation</a></li>
            <li class="done"><a href="i18n.html">i18n</a></li>
            <li class="done"><a href="including.html">Including</a></li>
            <li class="done"><a href="configuring.html">Configuring</a></li>
            <li class="done"><a href="init-components.html">Init components</a></li>
            <li class="done"><a href="components-api.html">Components API</a></li>
            <li class="done"><a href="global-setup.html">Global setup</a></li>
            <li class="done"><a href="https://react.metroui.org.ua">ReactJS</a></li>
            <li class="done"><a href="https://morrisjdev.github.io/ng-metro4/">Angular</a></li>
            <li class="done"><a href="vuejs.html">VueJS</a></li>
        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="m4q-about.html">Components</a>
        <ul class="toc-nav">
            <li class="toc-nav-title">M4Q</li>
                <li class="done"><a href="m4q-about.html">About</a></li>
                <li class="done"><a href="m4q-population.html">Population</a></li>
                <li class="done"><a href="m4q-constructor.html">Constructor</a></li>
                <li class="done"><a href="m4q-ajax.html">Ajax</a></li>
                <li class="done"><a href="m4q-animation.html">Animation</a></li>
                <li class="done"><a href="m4q-loops.html">Loops</a></li>
                <li class="done"><a href="m4q-visibility.html">Visibility</a></li>
                <li class="done"><a href="m4q-effects.html">Effects</a></li>
                <li class="done"><a href="m4q-subtree.html">Subtree functions</a></li>
                <li class="done"><a href="m4q-attributes.html">Attributes</a></li>
                <li class="done"><a href="m4q-html.html">Html, text and value</a></li>
                <li class="done"><a href="m4q-css.html">Css and classes</a></li>
                <li class="done"><a href="m4q-position.html">Position and size</a></li>
                <li class="done"><a href="m4q-manipulation.html">Manipulation</a></li>
                <li class="done"><a href="m4q-dataset.html">DataSet</a></li>
                <li class="done"><a href="m4q-events.html">Events</a></li>
                <li class="done"><a href="m4q-utils.html">Utils</a></li>

            <li class="toc-nav-title">Base</li>
                <li class="done"><a href="containers.html">Containers</a></li>
                <li class="done"><a href="grid.html">Grid system</a></li>
                <li class="done"><a href="typography.html">Typography</a></li>
                <li class="done"><a href="tables.html">Tables</a></li>
                <li class="done"><a href="forms.html">Forms</a></li>
                <li class="done"><a href="buttons.html">Buttons</a></li>
                <li class="done"><a href="images.html">Images</a></li>
                <li class="done"><a href="figures.html">Figures</a></li>
                <li class="done"><a href="lists.html">Lists</a></li>

            <li class="toc-nav-title">Form components</li>
                <li class="done"><a href="checkbox.html">Checkbox</a></li>
                <li class="done"><a href="file.html">File input</a></li>
                <li class="done"><a href="input.html">Input</a></li>
                <li class="done"><a href="input-material.html">Input material</a></li>
                <li class="done"><a href="keypad.html">Keypad</a></li>
                <li class="done"><a href="rating.html">Rating</a></li>
                <li class="done"><a href="radio.html">Radio</a></li>
                <li class="done"><a href="select.html">Select</a></li>
                <li class="done"><a href="slider.html">Slider</a></li>
                <li class="done"><a href="double-slider.html">Double Slider</a></li>
                <li class="done"><a href="spinner.html">Spinner</a></li>
                <li class="done"><a href="switch.html">Switch</a></li>
                <li class="done"><a href="tag-input.html">Tag input</a></li>
                <li class="done"><a href="textarea.html">Textarea</a></li>

            <li class="toc-nav-title">Menus</li>
                <li class="done"><a href="app-bar.html">App bar</a></li>
                <li class="done"><a href="bottom-nav.html">Bottom navigation</a></li>
                <li class="done"><a href="bottom-sheet.html">Bottom sheet</a></li>
                <li class="done"><a href="menu.html">Menu</a></li>
                <li class="done"><a href="ribbon-menu.html">Ribbon Menu</a></li>
                <!--<li class="done"><a href="head-bar.html">Head bar</a></li>-->
                <li class="done"><a href="sidebar.html">Side bar</a></li>
                <li class="done"><a href="sidenavigation.html">Side navigation</a></li>

            <li class="toc-nav-title">Controls</li>
                <li class="done"><a href="accordion.html">Accordion</a></li>
                <li class="done"><a href="badge.html">Badge</a></li>
                <li class="done"><a href="carousel.html">Carousel</a></li>
                <li class="done"><a href="cards.html">Cards</a></li>
                <li class="done"><a href="cube.html">Cube</a></li>
                <li class="done"><a href="counter.html">Counter</a></li>
                <li class="done"><a href="charms.html">Charms</a></li>
                <li class="done"><a href="chat.html">Chat</a></li>
                <li class="done"><a href="donut.html">Donut</a></li>
                <li class="done"><a href="image-compare.html">Image compare</a></li>
                <li class="done"><a href="image-magnifier.html">Image magnifier</a></li>
                <li class="done"><a href="gravatar.html">Gravatar</a></li>
                <li class="done"><a href="list.html">List</a></li>
                <li class="done"><a href="listview.html">ListView</a></li>
                <li class="done"><a href="master.html">Master</a></li>
                <li class="done"><a href="navview.html">NavView</a></li>
                <li class="done"><a href="panels.html">Panels</a></li>
                <li class="done"><a href="progress.html">Progress &amp; Activity</a></li>
                <li class="done"><a href="streamer.html">Streamer</a></li>
                <li class="done"><a href="stepper.html">Stepper</a></li>
                <li class="done"><a href="splitter.html">Splitter</a></li>
                <li class="done"><a href="tabs.html">Tabs</a></li>
                <li class="done"><a href="tabs-material.html">Tabs material</a></li>
                <li class="done"><a href="table.html">Table</a></li>
                <li class="done"><a href="tiles.html">Tiles</a></li>
                <li class="done"><a href="treeview.html">TreeView</a></li>
                <li class="done"><a href="wizard.html">Wizard</a></li>

            <li class="toc-nav-title">Information</li>
                <li class="done"><a href="dialog.html">Dialogs</a></li>
                <li class="done"><a href="info-box.html">Info box</a></li>
                <li class="done"><a href="hints.html">Hints</a></li>
                <li class="done"><a href="notify.html">Notify system</a></li>
                <li class="done"><a href="popovers.html">Popovers</a></li>
                <li class="done"><a href="toast.html">Toasts</a></li>
                <li class="done"><a href="windows.html">Windows</a></li>

            <li class="toc-nav-title">Date &amp; time</li>
                <li class="done"><a href="calendar.html">Calendar</a></li>
                <li class="done"><a href="calendarpicker.html">Calendar picker</a></li>
                <li class="done"><a href="datepicker.html">Date picker</a></li>
                <li class="done"><a href="timepicker.html">Time picker</a></li>
                <li class="done"><a href="countdown.html">Countdown</a></li>
                <li class="done"><a href="dateformat.html">Formatting date</a></li>

            <li class="toc-nav-title">Media</li>
                <li class="done"><a href="audio-button.html">Audio button</a></li>
                <li class="done"><a href="video.html">Video player</a></li>
                <li class="done"><a href="audio.html">Audio player</a></li>

            <li class="toc-nav-title">Tools</li>
                <li class="done"><a href="adblock.html">AdBlock hunter</a></li>
                <li class="done"><a href="collapse.html">Collapse</a></li>
                <li class="done"><a href="color-module.html">Color module</a></li>
                <li class="done"><a href="cookie.html">Cookie</a></li>
                <li class="done"><a href="cookie-disclaimer.html">Cookie disclaimer</a></li>
                <li class="done"><a href="draggable.html">Draggable</a></li>
                <li class="done"><a href="drag-items.html">Drag items</a></li>
                <li class="done"><a href="dropdown.html">Dropdown</a></li>
                <li class="done"><a href="validator.html">Form validator</a></li>
                <li class="done"><a href="hotkeys.html">Hotkeys</a></li>
                <li class="done"><a href="micro-tpl.html">Micro templates</a></li>
                <li class="done"><a href="template-component.html">Template component</a></li>
                <li class="done"><a href="ripple.html">Ripple</a></li>
                <li class="done"><a href="storage.html">Storage</a></li>
                <li class="done"><a href="session-storage.html">Session storage</a></li>
                <li class="done"><a href="sorter.html">Sorter</a></li>
                <li class="done"><a href="touch.html">Touch and swipe</a></li>

        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="border.html">Utilities</a>
        <ul class="toc-nav">
            <li class="done"><a href="border.html">Border</a></li>
            <li class="done"><a href="clear.html">Clear float</a></li>
            <li class="done"><a href="colors.html">Colors</a></li>
            <li class="done"><a href="cursors.html">Cursors</a></li>
            <li class="done"><a href="display.html">Display &amp; visibility</a></li>
            <li class="done"><a href="embed.html">Embed</a></li>
            <li class="done"><a href="extensions.html">Extensions</a></li>
            <li class="done"><a href="flex.html">Flex</a></li>
            <li class="done"><a href="functions.html">Functions</a></li>
            <li class="done"><a href="float.html">Float</a></li>
            <li class="done"><a href="position.html">Position</a></li>
            <li class="done"><a href="sizing.html">Sizing</a></li>
            <li class="done"><a href="spacing.html">Spacing</a></li>
        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="ani-about.html">Animations</a>
        <ul class="toc-nav">
            <li class="done"><a href="ani-about.html">About animation</a></li>
            <li class="done"><a href="ani-elements.html">Elements</a></li>
            <li class="done"><a href="ani-flip-card.html">Flip card</a></li>
            <li class="done"><a href="ani-post-card.html">Post card</a></li>
        </ul>
    </div>
    <div class="doc-nav-item">
        <a href="icons.html">Additional</a>
        <ul class="toc-nav">
            <li class="done"><a href="icons.html">Metro Icon Font</a></li>
            <li class="done"><a href="color-schemes.html">Color Schemes</a></li>
            <li><a href="https://builder.metroui.org.ua">Builder</a></li>
        </ul>
    </div>

</nav>

<script>
    var href = window.location.pathname.substring(window.location.pathname.lastIndexOf('/')+1);
    var link = $("#doc-nav a[href='"+href+"']");
    var item = link.closest(".doc-nav-item");
    var menu = item.find(".toc-nav");
    var sb_menu = $(".sidebar-menu");

    sb_menu.find(".toc-nav").hide();
    menu.show(function(){
        link.parent().addClass("active");
        sb_menu.animate({
            draw: {
                scrollTop: link.offset().top - sb_menu.offset().top
            },
            dur: 500
        });
    });

    if (Metro.utils.detectIE() !== 11 && docsearch) docsearch({
        apiKey: '00a53b92ba6ed063bec0a9320e60d4e6',
        indexName: 'metroui',
        inputSelector: '#search_input',
        debug: false
    });
</script>
